<template>
  <div>
    <p>我是home组件</p>
    <!-- vue2语法 -->
    <p @click="editname1">{{ name1 }}</p>
    <!-- vue3语法 -->
    <p @click="editname2">{{ name2 }}</p>
    <p @click="edituser">{{ userobj.name }}--{{ userobj.age }}</p>
    <!-- vue2.x 和vue3 建议不要混合使用 -->
    <p>
      <button @click="editData">修改数据 vue2方式</button>
      <button @click="editData1">修改数据 vue3方式</button>
    </p>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Home",
  data() {
    return {
      name1: "张三",
    };
  },
  methods: {
    editname1() {
      this.name1 = "李四";
    },
    editData() {
      console.log(this);
      // 可以获取当前组件实例上的数据
      console.log(this.name1);
      console.log(this.name2);
    },
  },
  // 组合式api函数
  setup() {
    // 01:在setup函数中定义数据, 然后setup函数必须返回一个对象,对象中导出你要渲染的数据
    // 02:在setup 函数中修改定义的数据,需要使用ref 这个函数方法,他是一个响应函数,主要用来处理基本数据类型,将基本数据类型转成响应式的数据

    // 03: ref 这个是一个响应式的函数,语法: ref(基本数据类型数据) 返回一个refImpel 一个引用对象,引用对象的value 就是响应数据
    //  注意 ref处理响应式数据的原理, 利用 vue2中的object.defineProperty 给数据绑定set 和get 实现数据劫持或监听
    //  注意: 当ref 处理复杂数据类型的时候, 实现数据响应式的原理使用 proxy 代理监听复杂数据类型的值的变化

    // 04: 在vue2语法中,可以获取setup()vue3 的方式定义的数据和方法,但是反过来在setup()函数中,因为该函数中的this 为undefiend
    // 意味着无法获取vue2语法定义的数据和方法,所以一般不建议vue2和vue3混合使用

    // ref 处理基本数据类型
    let name2 = ref("小红");
    //console.log(name2);
    const editname2 = () => {
      name2.value = "小明";
      //   console.log(name2);
    };

    //ref 处理复杂数据类型

    let userobj = ref({
      name: "李旺源大舅哥",
      age: 20,
    });
    //console.log(userobj);
    const edituser = () => {
      userobj.value.name = "李旺源小舅子";
      userobj.value.age = 10;
    };

    //
    const editData1 = () => {
      console.log(name2.value);
      console.log(this);
    };
    return {
      name2,
      editname2,
      userobj,
      edituser,
      editData1,
    };
  },
};
</script>
<style scoped>
</style>